<template>
  <div class="Bread">
  <Bread></Bread>
  </div>
  <div class="addgoods">
    <!-- 填写商品信息 -->
    <div>
      <el-form :model="form" label-width="130px">
        <el-form-item label="分类名称:" :rules="rules">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="上级分类:">
          <el-cascader :options="options" clearable v-model="form.Parentclassification" />
        </el-form-item>
        <el-form-item label="数量单位:">
          <el-input v-model="form.Unitofmeasure" />
        </el-form-item>
        <el-form-item label="排序:">
          <el-input v-model="form.sort" type="number" />
        </el-form-item>
        <el-form-item label="是否显示:">
          <el-radio-group v-model="form.showval">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否显示在导航栏:">
          <el-radio-group v-model="form.showNav">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分类图标:">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :action="action"
            :on-success="handlesuccess"
            list-type="picture"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="筛选属性:">
          <el-cascader :options="withAttrdata" clearable v-model="form.attribute" />
        </el-form-item>
        <el-form-item label="关键字:">
          <el-input v-model="form.keyword" />
        </el-form-item>
        <el-form-item label="分类描述:">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm"> 提交 </el-button>
          <el-button @click="claerForm"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "@/request/api";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from 'element-plus'
import Bread from "@/components/Bread.vue";
const router = useRouter();
//属性分类数据
let withAttrdata = ref([]);
let id = router.currentRoute.value.query;
// console.log(id);
let getGoodsswithAttr = async () => {
  let data = await api.goods.GoodswithAttrList();
  let newData = data.map((el) => {
    let newData2 = el.productAttributeList.map((ell) => {
      return {
        value: ell.id,
        label: ell.name,
      };
    });
    // console.log(el);
    return {
      value: el.id,
      label: el.name,
      children: newData2,
    };
  });
  withAttrdata.value = newData;
  // console.log(newData);
};
//
getGoodsswithAttr();
//分类列表数据
const options = ref([]);
//进入页面发送请求
let getGoodsfenlei = async () => {
  let data = await api.goods.GoodsfenleiList({
    pageNum: 1,
    pageSize: 100,
  });
  let newData = data.list.map((el) => {
    return {
      value: el.id,
      label: el.name,
    };
  });
  // console.log('fenlei',data,newData);
  options.value = newData;
};
getGoodsfenlei();
const form = reactive({
  name: "",
  keyword: "",
  description: "",
  attribute: "",
  showval: 0,
  showNav: 0,
  sort: 0,
  Unitofmeasure: "",
  Parentclassification: 0,
});
//表单效验规则
let rules = [
  {
    required: true,
    message: "Please input email address",
    trigger: "blur",
  },
];
//上传图标
let imageUrl = ref('')
let action = ref('http://120.24.64.5:8088/mall-admin/minio/upload')
const fileList = ref<UploadUserFile[]>([])
const handlesuccess: UploadProps['onSuccess'] = (file) => {
  // console.log(file.data.url)
  imageUrl.value = file.data.url
}
//添加分类
let submitForm = async () => {
  ElMessageBox.confirm("是否确认提交!", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // 发请求
      await api.goods.addproductCategory({
        description: form.description,
        icon: imageUrl.value,
        keywords: form.keyword,
        name: form.name,
        navStatus: form.showNav,
        parentId: form.Parentclassification[0],
        productUnit: form.Unitofmeasure,
        showStatus: form.showval,
        sort: form.sort,
      });
      (form.name = ""),
        (form.keyword = ""),
        (form.description = ""),
        (form.attribute = ""),
        (form.showval = 0),
        (form.showNav = 0),
        (form.sort = 0),
        (form.Unitofmeasure = ""),
        (form.Parentclassification = 0),
        (imageUrl.value = ''),
        ElMessage({
          message: "操作成功",
          grouping: true,
          type: "success",
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作失败",
      });
    });
};
//重置表单
let claerForm = () => {
  ElMessageBox.confirm("是否确认重置!", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      (form.name = ""),
        (form.keyword = ""),
        (form.description = ""),
        (form.attribute = ""),
        (form.showval = 0),
        (form.showNav = 0),
        (form.sort = 0),
        (form.Unitofmeasure = ""),
        (form.Parentclassification = 0),
        ElMessage({
          message: "操作成功",
          grouping: true,
          type: "success",
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作失败",
      });
    });
};
</script>

<style lang="scss" scoped>
.addgoods {
  width: 800px;
  height: 835px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  margin: 0 auto;
  margin-top: 30px;
  padding: 35px;
  box-sizing: border-box;
}
.el-form-item__content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 300px;
  .text {
    width: 400px;
  }
}
.Bread {
  position: sticky;
  top: -100px;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #eee;
  // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding-left: 20px;
  box-sizing: border-box;
}
</style>
